<%@ page import="java.util.UUID" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/8
  Time: 12:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../mobile/js/jquery1.42.min.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${record.name}</title>
    <style>

        a {
            text-decoration: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        input {
            border: 0;
            outline: none;
            background-color: rgba(0, 0, 0, 0);
        }

        #app {

            width: 100%;
            height: 100%;
        }

        .inp > input {
            padding: 10px;
            width: 100%;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .inp > p {
            padding: 10px;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .inp > p input {
            padding: 0 10px;
            width: 60%;
        }

        #app > div:nth-child(2) {
            margin: 5px 0 0 0;
            background-color: #eee;
            padding: 20px 10px;
            color: #807d7d;
        }

        #app > p {
            padding: 20px 10px;
        }

        .jine {
            width: 46%;
            margin: 5px;
            height: 80px;
            background: #eee;
            text-align: center;

        }

        .jine > P {
            margin: 20px 0 0;
        }

        .jine > span {
            font-size: 13px;
            color: #807d7d;
        }

        #app > div:nth-child(4) {
            display: flex;
            flex-wrap: wrap;
        }

        .btn {
            width: 300px;
            height: 40px;
            background-color: #2488ea;
            font-size: 19px;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            line-height: 40px;
            margin: 15px auto;
        }

        #app > div:nth-child(6) {
            width: 110px;
            margin: 15px auto;
        }

        #app > div:nth-child(6) a {
            color: #000;
            margin: 15px auto;
        }
    </style>

</head>
<body>


<div id="app">
    <div class="inp">
        <input type="text" placeholder="请输入待转让的充值卡信息">

        <p id="nump">卡号<input id="num" type="text" placeholder="请输入16位卡号"></p>

        <p>卡密<input id='pw' type="text" placeholder="请输入20位密码"></p>
    </div>
    <div>
        <p>${record.className}转让后收到的金额将到你的支付宝账户</p>
    </div>
    <p>请选择充值卡金额</p>

    <div>
        <c:forEach items="${commodity}" var='com'>
            <div class="jine" id="${com.id}">
                <p>${com.faceValue}</p>
                <span onclick="setMoney('${com.id}')">到账${com.amount}元/服务费${com.tip}元</span>
            </div>
        </c:forEach>
    </div>
    <div class="btn" onclick="submit()">统一服务条款并使用</div>
    <div><a href="/mobileApply/huishou_xieyi.html">查看服务条款</a></div>
</div>


<script>
    //判断空值
    function notEmpty(value) {
        console.log(value);
        var result = false;
        if ("" != value && value != null) {
            result = true;
        }
        console.log(result);
        return result;
    }
    function setMoney(id) {
        $("#faceValueId").val(id);
        $('.jine').css('background', '#eee');
        $('#' + id).css("background-color", 'red');

    }

    function submit() {
        cardNumber=$('#num').val();
        cardPassword=$('#pw').val();
        id=$('#faceValueId').val();
        hasCardNumber=${record.hasCardNumber};
        if(id=='-1'){
            alert('未选择充值卡金额');
            return false;
        }
        if((hasCardNumber==0)&&notEmpty(cardNumber)==false){
            alert('卡号不能为空');
            return false;
        }
        if(notEmpty(cardPassword)==false){
            alert('卡密不可为空');
            return false;
        }

        $.ajax({
            url: '/mobile/saveCard',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                commodityId: "${record.id}",
                feedbackId: id,
                cardNumber: cardNumber,
                cardPassword: cardPassword,
                cards: '',
                hasCardNumber:hasCardNumber,
                type: 0,
                alipayAccount:'',
                realName:''
            },
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success: function (reData) {
                if ("000000" == reData.code) {//保存成功，去交易记录页面
                    alert("提交成功");
                    //window.location.href = "/mobile/toTradeRecordPage";
                } else {
                    alert(reData.msg);
                }
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete: function () {
                //console.log('结束')
            }
        });
    }


</script>
<script>
    $(function setMax() {
        cardNumberSize = "${record.cardNumberSize}";
        cardPasswordSize =${record.cardPasswordSize};
        hasCardNumber = "${record.hasCardNumber}";
        if (hasCardNumber == 1) {
            $('#num').hide();
            $('#nump').hide();
        } else if (cardNumberSize != '99') {
            $('#num').attr('placeholder', '卡号最长' + cardNumberSize + '位');
            $('#num').attr({maxlength: cardNumberSize});
        }
        if (cardPasswordSize != '99') {

            $('#pw').attr('placeholder', '卡密最长' + cardPasswordSize + '位');
            $('#pw').attr({maxlength: cardPasswordSize});

        }
    });
    function setMax() {
        cardNumberSize = "${record.cardNumberSize}";
        cardPasswordSize =${record.cardPasswordSize};
        hasCardNumber = "${record.hasCardNumber}";
        if (hasCardNumber == 1) {
            $('#num').hide();
            $('#nump').hide();
        } else if (cardNumberSize != '99') {
            $('#num').attr('placeholder', '卡号最长' + cardNumberSize + '位');
            $('#num').attr({maxlength: cardNumberSize});
        }
        if (cardPasswordSize != '99') {
            $('#pw').attr('placeholder', '卡密最长' + cardPasswordSize + '位');
            $('#pw').attr({maxlength: cardPasswordSize});

        }
    };
</script>
<input type='hidden' id="faceValueId" value="-1"/>
<input type="hidden" id='hasCardNumber' value="${record.hasCardNumber}"/>
<input type="hidden" id="cardNumberSize" value="${record.cardNumberSize}"/>
<input type="hidden" id="cardPasswordSize" value="${record.cardPasswordSize}"/>
</body>
</html>